import React from 'react'
import { Drawer, Form, Button, Input,TreeSelect,Radio, message} from 'antd'
import { getDeptApi,UpdateUserInfoApi } from '../../apis/user';
const { TextArea } = Input;
export default function ProfileDrawer(props: any) {
    const { open, setOpen, loginUser,getLoginUser } = props
    //部门数据
    const[deptData,setDeptData]=React.useState([])
    //
    const [userInput, setUserInput] = React.useState({})
    const onClose = () => {
        setOpen(false);
    };
    React.useEffect(() => {
        //获取部门数据
        getDeptApi().then(res => {
            setDeptData(res.rows.children)
        })
    }, [])
    const onFormChange = (_:any,value:any) => {
        if (value.roleId) {
            //处理角色数组，转成字符串
            console.log(value,'value')
            setUserInput({...value,roleId:value.roleId.join()})
        } else {
            setUserInput(value)
        }
    }
    const confirmUpdate = () => {
        if (JSON.stringify(userInput) == '{}') {
            message.error('数据未变化')
        } else {
            UpdateUserInfoApi({
                ...userInput,
                userId: loginUser.userId,
                status: loginUser.status,
                roleId: loginUser.roleId,
                username:loginUser.username
            }).then(res => {
                message.success('修改成功')
                getLoginUser()
                setOpen(false)
            })
        }
        
    }
  return (
      <>
          <Drawer title="编辑资料" placement="right" onClose={onClose} open={open}
              width={600}
              footer={
                  <>
                  <Button>取消</Button>
                  <Button onClick={confirmUpdate}>确定</Button>
                  </>
              }
          >
              <Form
              onValuesChange={onFormChange}
              >
                  <Form.Item
                      label='邮箱'
                      name={'email'}
                      initialValue={loginUser.email}
                  >
                      <Input></Input>
                  </Form.Item> 
                  <Form.Item
                      name={'mobile'}
                      initialValue={loginUser.mobile}
                  label="手机号"
                  >
                      <Input></Input>
                  </Form.Item>     
                  <Form.Item
                      label="部门"
                      name={'deptId'}
                      initialValue={loginUser.deptId}
                  >
                <TreeSelect
                        treeData={deptData}
                        allowClear
                        
                    />
                  </Form.Item>  
                  <Form.Item
                      label='性别'
                      name={'ssex'}
                        initialValue={loginUser.ssex}
                  >
                   <Radio.Group>
                       <Radio value={'0'}>男</Radio>     
                       <Radio value={'1'}>女</Radio>     
                       <Radio value={'2'}>保密</Radio>     
                    </Radio.Group>   
                  </Form.Item>
                  <Form.Item
                      label='描述'
                      name={'description'}
                      initialValue={loginUser.description}
                  >
                      <TextArea rows={4} />
                  </Form.Item> 
        </Form>
      </Drawer>
      </>
  )
}
